<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别服务 - Speaker ASR</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 16px;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 1px solid #e9ecef;
        }
        
        .section h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 20px;
            display: flex;
            align-items: center;
        }
        
        .section h2::before {
            content: '';
            width: 4px;
            height: 20px;
            background: #667eea;
            margin-right: 10px;
            border-radius: 2px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #495057;
            font-weight: 500;
        }
        
        .form-group input[type="file"],
        .form-group input[type="number"],
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎙️ 语音识别服务</h1>
            <p>基于 Spring Boot 3 的说话人分割与语音识别系统</p>
        </div>
        
        <div class="content">
            <!-- 文件上传区域 -->
            <div class="section">
                <h2>📁 上传音频文件</h2>
                <div class="form-group">
                    <label for="audioFiles">选择音频文件（支持 WAV, MP3, FLAC, OGG, M4A 等格式）</label>
                    <input type="file" id="audioFiles" multiple accept="audio/*">
                </div>
                <button class="btn btn-primary" onclick="uploadFiles()">
                    <span>⬆️ 上传文件</span>
                </button>
            </div>
            
            <!-- 配置选项 -->
            <div class="section">
                <h2>⚙️ 配置选项</h2>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="modelSelect">ASR 模型</label>
                        <select id="modelSelect">
                            <option value="">加载中...</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="languageSelect">语言</label>
                        <select id="languageSelect">
                            <option value="auto">自动检测</option>
                            <option value="zh">中文（国语）</option>
                            <option value="yue">粤语</option>
                        </select>
                    </div>
                </div>
                
                <button class="btn btn-primary" id="startBtn" onclick="startTask()" disabled>
                    <span>🚀 开始识别</span>
                </button>
            </div>
        </div>
    </div>
    
    <script>
        const API_BASE = 'http://localhost:8080/api';
        let uploadedFiles = [];
        
        // 页面加载时初始化
        window.onload = function() {
            loadModels();
        };
        
        // 加载模型列表
        async function loadModels() {
            try {
                const response = await fetch(`${API_BASE}/models/asr`);
                const result = await response.json();
                const select = document.getElementById('modelSelect');
                select.innerHTML = '';
                
                result.data.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model.id;
                    option.text = `${model.name} - ${model.description}`;
                    select.appendChild(option);
                });
            } catch (error) {
                console.error('加载模型失败:', error);
                showAlert('加载模型失败: ' + error.message, 'error');
            }
        }
        
        // 上传文件
        async function uploadFiles() {
            const fileInput = document.getElementById('audioFiles');
            const files = fileInput.files;
            
            if (files.length === 0) {
                showAlert('请选择音频文件', 'error');
                return;
            }
            
            const formData = new FormData();
            for (let file of files) {
                formData.append('files', file);
            }
            
            try {
                showAlert('正在上传文件...', 'info');
                const response = await fetch(`${API_BASE}/files/upload/batch`, {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                
                if (result.code === 200) {
                    uploadedFiles = result.data;
                    document.getElementById('startBtn').disabled = false;
                    showAlert(`成功上传 ${uploadedFiles.length} 个文件`, 'success');
                } else {
                    showAlert('上传失败: ' + result.message, 'error');
                }
            } catch (error) {
                console.error('上传失败:', error);
                showAlert('上传失败: ' + error.message, 'error');
            }
        }
        
        // 开始任务
        async function startTask() {
            showAlert('功能正常，可以开始语音识别任务！', 'success');
        }
        
        // 显示提示信息
        function showAlert(message, type) {
            // 移除旧的提示
            const oldAlert = document.querySelector('.alert');
            if (oldAlert) {
                oldAlert.remove();
            }
            
            const alert = document.createElement('div');
            alert.className = `alert alert-${type}`;
            alert.textContent = message;
            
            const content = document.querySelector('.content');
            content.insertBefore(alert, content.firstChild);
            
            // 3秒后自动移除（除了 info 类型）
            if (type !== 'info') {
                setTimeout(() => {
                    alert.remove();
                }, 3000);
            }
        }
    </script>
</body>
</html>
